<template>
    <view>
        <view class="goods-item" v-for="(item,index) in params.comments">
            <view class="u-flex">
                <u-image width="100rpx" height="100rpx" :src="item.goods_image"></u-image>
                <view class="cm-grade">
                    <view class="u-flex item-flower praise" :class="[item.grade === 'good' && 'active']" @click="handleComments('good', index)">
                        <text class="txt"></text>
                        <view>好评</view>
                    </view>
                    <view class="u-flex item-flower average" :class="[item.grade === 'neutral' && 'active']" @click="handleComments('neutral', index)" >
                        <text class="txt"></text>
                        <view>中评</view>
                    </view>
                    <view class="u-flex item-flower bad-review" :class="[item.grade === 'bad' && 'active']" @click="handleComments('bad', index)">
                        <text class="txt"></text>
                        <view>差评</view>
                    </view>
                </view>
            </view>
            <view class="context u-margin-top-20">
                <u-input v-model="item.content" type="textarea" height="150"
                    :placeholder="item.grade === 'good' ? '宝贝满足您的期待吗？说说它的优点和美中不足的地方吧' : '可以告诉我们您遇到了什么问题吗？'" />
            </view>
            <view class="comments-images">
                <u-upload ref="uUpload" :action="action" :header="header" :index="item.sku_id" max-count="5"></u-upload>
            </view>
        </view>
        <view class="goods-item">
            <view>
                <u-icon size="42" name="shop" custom-prefix="custom-icon"></u-icon>
                <text class="u-m-l-15">店铺评分</text>
            </view>
            <view class="u-flex u-margin-top-25 goods-title">
               <view class="goods-t">
                    <view>描述相符：</view>
                    <u-rate v-model="params.description_score" gutter="12" size="34" min-count="1"></u-rate>
                    <view class="u-m-l-10">{{ countGradeText(params.description_score) }}</view>
                </view>
                <view class="goods-t">
                    <view>服务态度：</view>
                    <u-rate v-model="params.service_score" gutter="12" size="34" min-count="1"></u-rate>
                    <view class="u-m-l-10">{{ countGradeText(params.service_score) }}</view>
                </view>
                <view class="goods-t">
                    <view>物流服务：</view>
                    <u-rate v-model="params.delivery_score" gutter="12" size="34" min-count="1"></u-rate>
                    <view class="u-m-l-10">{{ countGradeText(params.delivery_score) }}</view>
                </view>
            </view>
        </view>
        <view class="order-footer" >
            <u-button type="error" @click="handleSubmit">发表评论</u-button>
        </view>
    </view>
</template>

<script>
import { api } from '@/config/config.js'
import * as API_Member from '@/api/members.js'
import Cache,{Keys} from '@/utils/cache.js'
export default {
    data() {
        return {
            sku_list: [],
            order_sn: '',
            action: `${api.buyer}/uploaders`,
            header:  { Authorization: Cache.getItem(Keys.accessToken) },
            count: 5,
            grade: '',
            params: {
                order_sn: '',
                delivery_score: 5,
                description_score: 5,
                service_score: 5,
                comments: [],
            },
            isSubmitForm: true
        };
    },
    onLoad(options) {
        this.order_sn = options.order_sn;
        this.params.order_sn = options.order_sn;
        const _sku_list = JSON.parse(decodeURIComponent(options.sku_list));
        _sku_list.forEach(res => {
            let _sku = {
                content: '',
                grade: 'good',
                images: [],
                sku_id: res.sku_id,
                name: res.name,
                goods_image: res.goods_image,
                count: 5,
            }
            this.params.comments.push(_sku);
        })
    },
    methods: {
        countGradeText(val) {
            switch (val) {
                case 5: return '非常好'
                case 4: return '好'
                case 3: return '一般'
                case 2: return '差'
                case 1: return '非常差'
                default: return '非常差'
            }
        },
        // 评论
        handleComments(type, index) {
            this.params.comments[index].grade = type
        },
        handleSubmit(){
            this.params.comments.forEach(res => {
                this.$refs.uUpload.forEach((item => {
                    if(res.sku_id === item.index) {
                        res.images = []
                        item.lists.forEach(key => {
                            key.response && res.images.push(key.response.url)
                        })
                    }
                }))
            })
            const params = JSON.parse(JSON.stringify(this.params))
            const result = params.comments.some(key => (key.grade !== 'good' && !key.content))
            if(result) {
                this.$u.toast('请告诉我们您不满意的原因，我们愿尽最大的努力！');
                return
            }
            API_Member.commentsOrder(params).then(()=>{
                this.$u.toast('发布成功')
                uni.navigateBack()
                uni.$emit('back')
            }).catch(() => {
                this.$u.toast('发布失败')
            })
        }
    }
}
</script>

<style lang="scss">
.goods-item {
    background-color: #FFFFFF;
    margin: 15rpx;
    padding: 20rpx;
    border-radius: 10rpx;
}
.goods-title {
    color: #999;
    display: flex;
    margin-bottom: 15rpx;
    flex-direction: column;
}
.u-flex {
    -webkit-box-align: unset;
    -webkit-align-items: unset;
    align-items: unset;
}
.goods-t {
    display: flex;
    margin-bottom: 20rpx;
    flex-direction: row;
}
.cm-grade {
    display: flex;
    width: calc(100% - 170rpx);
    margin-left: 60rpx;
    .item-flower {
        display: flex;
        align-items: center;
        width: 160rpx;
        height: 100rpx;
        position: relative;
        .input {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        .txt {
            display: inline-block;
            width: 46rpx;
            height: 50rpx;
            margin-right: 10rpx;
        }
        &.praise .txt {
            background: url("") no-repeat center;
            background-size: 85%;
        }
        &.praise.active .txt {
            background: url("") no-repeat center;
            background-size: 85%;
        }
        &.average .txt {
            background: url("") no-repeat center;
            background-size: 85%;
        }
        &.average.active .txt {
            background: url("") no-repeat center;
            background-size: 85%;
        }
        &.bad-review .txt {
            background: url("") no-repeat center;
            background-size: 85%;
        }
        &.bad-review.active .txt {
            background: url("") no-repeat center;
            background-size: 85%;
        }
    }
}
</style>
